//The ui selectors
//rule :Each words'first letter should be capitalize and between each two words use underline to distinguish
let Max_Bright = document.querySelector("#max_bright");
let Slider_Bright = document.querySelector("#slider-bright");
let Hue = document.querySelector("#hue");
let Slider_Hue = document.querySelector("#slider-color");
let Delay_Time = document.querySelector("#delay_time");
let Control_Type = document.querySelector("#control_type");
let Mode = document.querySelector("#mode");
let Slider_Hue_Bg = document.querySelector("#slider-color-bg");
let Hue_Bg = document.querySelector("#hue-bg");
let Group = document.querySelector("#group");

let advanced_ctr_path = "/advanced_ctr";


Max_Bright.addEventListener("input", () => {
  let brightness = Max_Bright.value;

  console.log("--brightness:  " + brightness);

  Slider_Bright.innerHTML = brightness;
 
  //send data
  let sendRequest = new XMLHttpRequest();
  sendRequest.open("POST", advanced_ctr_path + "?bright=" + brightness, true);
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      console.log(sendRequest.responseText);
    }
  };
});

Hue.addEventListener("input", () => {
  let hue = Math.round((255 * Hue.value) / 360);
  console.log("--HUE:  " + hue);
  Slider_Hue.innerHTML = Hue.value;

  //send data
  let sendRequest = new XMLHttpRequest();
  sendRequest.open("POST", advanced_ctr_path + "?hue=" + hue, true);
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      console.log(sendRequest.responseText);
    }
  };
});



Hue_Bg.addEventListener("input", () => {
  let hue = Math.round((255 * Hue_Bg.value) / 360);
  console.log("--HUE:  " + hue);
  Slider_Hue_Bg.innerHTML = Hue_Bg.value;

  //send data
  let sendRequest = new XMLHttpRequest();
  sendRequest.open("POST", advanced_ctr_path + "?hue_bg=" + hue, true);
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      console.log(sendRequest.responseText);
    }
  };
});



Delay_Time.addEventListener("input", () => {
  let val = Delay_Time.value;
  if (val > 256 || val < 0) {
    val = 20;
    Delay_Time.value = 20;
  }
  if(val==0) val=1;
  console.log("delay time:" + val);

  //send data
  let sendRequest = new XMLHttpRequest();
  sendRequest.open("POST", advanced_ctr_path + "?delay_time=" + val, true);
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      console.log(sendRequest.responseText);
    }
  };
});

Control_Type.addEventListener("input", () => {
  let slectedval = Control_Type.value;
  console.log("selected control type= " + slectedval);

  //send data
  let sendRequest = new XMLHttpRequest();
  sendRequest.open("POST", advanced_ctr_path + "?control_type=" + slectedval, true);
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      console.log(sendRequest.responseText);
    }
  };
});

Mode.addEventListener("input", () => {
  let slectedval = Mode.value;
  console.log("selected mode= " + slectedval);

  if ("Launch_Bg" === slectedval) Group.style.display = 'block';
  else Group.style.display = 'none';

  //send data
  let sendRequest = new XMLHttpRequest();
  sendRequest.open("POST", advanced_ctr_path + "?mode=" + slectedval, true);
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      console.log(sendRequest.responseText);
    }
  };
});




